<template>
  <div>
    <el-row>
      <el-col :span="5">
        <el-button type="primary" size="mini" @click="dialogVisible = true">添加任务</el-button>
      </el-col>
    </el-row>
    <el-table :data="jobs" highlight-current-row stripe v-loading="loading" element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading" element-loading-background="#fafafa"
      style="width: 100%; margin-top: 10px;">
      <el-table-column type="index" label="编号" align="center" width="80">
      </el-table-column>
      <el-table-column prop="jobName" label="任务名称" align="center" width="200">
      </el-table-column>
      <el-table-column prop="cron" label="CRON表达式" align="center" width="200">
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center" width="100">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status" type="success">运行中</el-tag>
          <el-tag v-else type="info">待运行</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="修改时间" align="center" width="180">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="success" :disabled="(scope.row.status)==0?false:true"
            @click="startJob(scope.$index)">开始
          </el-button>
          <el-button size="mini" type="warning" :disabled="(scope.row.status)==1?false:true"
            @click="stopJob(scope.$index)">停止
          </el-button>
          <el-button size="mini" type="primary" :disabled="(scope.row.status)==2?false:true"
            @click="proceedJob(scope.$index)">继续
          </el-button>
          <el-button size="mini" type="danger" :disabled="(scope.row.status)!=1?false:true"
            @click="deleteJob(scope.$index)">删除
          </el-button>
          <el-button size="mini" @click="resetJobStatus(scope.$index)">重置</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="添加任务" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
      <el-form :model="job" :rules="rules" ref="job" label-width="100px" class="form">
        <el-form-item label="任务名称" prop="jobName">
          <el-input v-model="job.jobName" placeholder="任务名称" type="text"></el-input>
        </el-form-item>
        <el-form-item label="表达式" prop="cron">
          <el-input v-model="job.cron" placeholder="cron表达式" type="text"></el-input>
        </el-form-item>
        <el-form-item label="任务组" prop="groupCode">
          <el-select v-model="job.groupCode" placeholder="请选择任务组">
            <el-option v-for="item in groups" :key="item.code" :label="item.msg" :value="item.code"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button round @click="resetForm('job')">重置</el-button>
        <el-button type="primary" round @click="submitForm('job')">立即创建</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getJobList,
    addJob,
    startJob,
    stopJob,
    proceedJob,
    deleteJob,
    resetJobStatus
  } from '@/apis/SysApi'

  import {
    getDic
  } from '@/apis/XcxApi'

  export default {
    name: 'Job',
    data() {
      return {
        jobs: [],
        groups: [],
        job: {},
        dialogVisible: false,
        rules: {
          jobName: [{
            required: true,
            message: '请输任务名称',
            trigger: 'blur'
          }],
          cron: [{
            required: true,
            message: '请输入cron表达式',
            trigger: 'blur'
          }],
          groupCode: [{
            required: true,
            message: '请选择任务组',
            trigger: 'blur'
          }]
        },
        loading: true
      }
    },
    created() {
      this.getJobList()
      this.getDic()
    },
    methods: {
      getJobList() {
        getJobList().then(res => {
          this.jobs = res.data
          this.loading = false
        })
      },
      startJob(index) {
        startJob({
          id: this.jobs[index].id
        }).then(res => {
          if (res.data > 0) {
            this.$message.success('开始成功')
            this.jobs[index].status = 1
          } else {
            this.$message.error('开始失败')
          }
        })
      },
      stopJob(index) {
        stopJob({
          id: this.jobs[index].id
        }).then(res => {
          if (res.data > 0) {
            this.$message.success('停止成功')
            this.jobs[index].status = 2
          } else {
            this.$message.error('停止失败')
          }
        })
      },
      proceedJob(index) {
        proceedJob({
          id: this.jobs[index].id
        }).then(res => {
          if (res.data > 0) {
            this.$message.success('继续成功')
            this.jobs[index].status = 1
          } else {
            this.$message.error('继续失败')
          }
        })
      },
      deleteJob(index) {
        deleteJob({
          id: this.jobs[index].id
        }).then(res => {
          if (res.data > 0) {
            this.$message.success('删除成功')
            this.getJobList()
          } else {
            this.$message.error('删除失败')
          }
        })
      },
      getDic() {
        getDic({
          type: 'quartzJobGroupEnum'
        }).then(res => {
          this.groups = res.data
        })
      },
      resetJobStatus(index) {
        resetJobStatus({
          id: this.jobs[index].id
        }).then(res => {
          if (res.data > 0) {
            this.$message.success('重置成功')
            this.getJobList()
          } else {
            this.$message.error('重置失败')
          }
        })
      },
      // 关闭对话框
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => {})
      },
      // 提交表单
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            addJob(this.job).then(res => {
              if (res.data) {
                this.$message.success('添加成功')
                this.getJobList()
                this.dialogVisible = false
              } else {
                this.$message.error('添加失败')
              }
            })
          } else {
            return false
          }
        })
      },
      // 重置表单
      resetForm(formName) {
        this.$refs[formName].resetFields()
      }
    }
  }
</script>

<style scoped>
  .form {
    width: 80%;
    margin-left: 10%;
  }
</style>
